<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>播放视频</title>
    </head>

    <body class="play">
        <main class="main">
            <video src="http://fitness.h5.itsource.cn:3701/course/part1.mp4" id="video" muted></video>
            <h2 id="part"><span id="curPart">1</span>/<span id="totalPart">4</span></h2>
            <h3 id="title">视频的标题</h3>
        </main>

        <!-- 进度条 -->
        <div class="progress">
            <i class="iconfont icon-prev"></i>
            <i class="iconfont icon-pause"></i>
            <i class="iconfont icon-next"></i>
        </div>

        <div class="progress-bar"></div>

        <!-- 暂停弹出层 -->
        <div id="mask"></div>
        <div id="box">
            <div id="playBox">
                <i class="iconfont icon-play"></i>
                继续训练
            </div>
            <div id="endBox">
                <i class="iconfont icon-end"></i>
                结束训练
            </div>
        </div>

    </body>

</html>